import { defuatColor } from "../../shared";
import { SizeConifg, Selector, TypeConifg, defualtSize } from './config'
const createStyle = (type: TypeConifg, size: SizeConifg, disabled) => {
  let styles = `
  :host .${Selector} {
        width: var(--button-width, 88PX);
        height:var(--button-height, 32px);
        border-radius: var(--button-border-radius, 8px);
        background: var(--button-background, ${defuatColor.primary});
        color: var(--button-color, #fff);
        font-size: var(--button-font-size, 14px);
        font-weight: var(--button-font-weight, 500);
        line-height: var(--button-line-height, 32px);
        text-align: center;
        cursor: pointer;
        border: none;
  }
 `
  if (type) {
    styles += `
    :host([type="${type}"]) .${Selector} {
        background: var(--button-background-${type}, ${defuatColor[type]});
    }
    `
  }
  if (size) {
    styles += `
    :host([size="${size}"]) .${Selector} {
        width: var(--button-width-${size}, ${defualtSize(size).width}px);
        height:var(--button-height-${size}, ${defualtSize(size).height}px);
        border-radius: var(--button-border-radius-${size}, ${defualtSize(size).borderRadius}px);
        font-size: var(--button-font-size-${size}, ${defualtSize(size).fontSize}px);
        line-height: var(--button-line-height-${size}, ${defualtSize(size).lineHeight}px);
    }
    `
  }
  if (disabled === '' || disabled === 'true') {
    styles += `
    :host([disabled]) .${Selector}{ 
      cursor: not-allowed; 
      pointer-events: all; 
      border: 1px solid #D6D6D6;ß
      color: #ABABAB;
      background-color: #EEE;
  }
    `
  }
  return styles
}
export default function renderTemplate(config): string {
  const { type, size, disabled, part } = config
  let template = ``
  if (part) {
    template = `
    <style>
      ${createStyle(type, size, disabled)}
    </style>
    <button class="${Selector}" part="${part}">
      <slot></slot>
    </button>
  `;
  } else {
    template = `
  <style>
    ${createStyle(type, size, disabled)}
  </style>
  <button class="${Selector}">
    <slot></slot>
  </button>
`
  }
  return template
}